
import React, {useState, useEffect} from 'react';
import {StyleSheet, Button, Text, View, SafeAreaView, Image, Alert } from 'react-native';
import { ScrollView, TouchableOpacity, FlatList, TextInput } from 'react-native-gesture-handler';
import {Ionicons} from '@expo/vector-icons';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Axios from 'axios';
import '../config';

export default function Home({navigation}) {

    return (
        <SafeAreaView style={styles.container}>

            <View style={styles.card}>
                <View style={styles.iconecard}>
                    <Icon name="coins" size={30} color="blue" />
                    <Text style={styles.titulocard}>VENDAS APROVADAS HOJE</Text>
                </View>
                <Text style={styles.valorcard}>5</Text>
            </View>

            <View style={styles.card}>
                <View style={styles.iconecard}>
                    <Icon name="dollar-sign" size={30} color="green" />
                    <Text style={styles.titulocard}>TOTAL VENDIDO HOJE</Text>
                </View>
                <Text style={styles.valorcard}>R$ 50</Text>
            </View>

            <View style={styles.card}>
                <View style={styles.iconecard}>
                    <Icon name="box" size={30} color="#8c3a3a" />
                    <Text style={styles.titulocard}>PEDIDOS PENDENTES</Text>
                </View>
                <Text style={styles.valorcard}>5</Text>
            </View>

            <View style={styles.card}>
                <View style={styles.iconecard}>
                    <Icon name="clipboard-list" size={30} color="#3b568c" />
                    <Text style={styles.titulocard}>TOTAL VENDAS MÊS</Text>
                </View>
                <Text style={styles.valorcard}>5</Text>
            </View>

            <View style={styles.card}>
                <View style={styles.iconecard}>
                    <Icon name="money-check" size={30} color="#3b8c45" />
                    <Text style={styles.titulocard}>VENDAS MÊS R$</Text>
                </View>
                <Text style={styles.valorcard}>R$ 500</Text>
            </View>

            <View style={styles.card}>
                <View style={styles.iconecard}>
                    <Icon name="users" size={30} color="blue" />
                    <Text style={styles.titulocard}>CLIENTES CADASTRADOS</Text>
                </View>
                <Text style={styles.valorcard}>20</Text>
            </View>

        

            <View style={styles.card}>
                <View style={styles.iconecard}>
                    <Icon name="boxes" size={30} color="#947eed" />
                    <Text style={styles.titulocard}>PRODUTOS CADASTRADOS</Text>
                </View>
                <Text style={styles.valorcard}>20</Text>
            </View>

            <View style={styles.card}>
                <View style={styles.iconecard}>
                    <Icon name="exclamation-triangle" size={30} color="#e3923b" />
                    <Text style={styles.titulocard}>ESTOQUE BAIXO</Text>
                </View>
                <Text style={styles.valorcard}>3</Text>
            </View>
            
        </SafeAreaView>
        

    );

}


const styles = StyleSheet.create({
    container:{
        
        alignItems:'center',
        padding:10,
        
    },
    card:{
        backgroundColor:'#fafafa',
        alignItems:'center',
        padding:10,
        width: '100%',
        borderRadius: 7,
        flexDirection:'row',
        marginBottom:15,
        justifyContent:'space-between',
    },
    titulocard:{
        fontSize:17,
        fontWeight:"800",
        marginLeft:10,
        textAlignVertical:"center"
    },

    valorcard:{
        fontSize:17,
        
        
    },
    iconecard:{
        flexDirection:'row',
        padding:5
    }
});